<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="9">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>CPU</span>
            </div>
          </template>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="品牌">
                {{cpu.Manufacturer}}
            </el-descriptions-item>
            <el-descriptions-item label="主频">
                {{cpu['Current Speed']}}
            </el-descriptions-item>
            <el-descriptions-item label="核数">
                {{cpu['Core Count']}}
            </el-descriptions-item>
            <el-descriptions-item label="占用率">
              <span :class="Number(cpu.usage) > Number(threshold.cpuUsage) ? 'red' : 'green'" v-if="cpu.usage">{{cpu.usage}}%</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="9">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>内存</span>
            </div>
          </template>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="品牌">
                {{memory.brand}}
            </el-descriptions-item>
            <el-descriptions-item label="频率">
                {{memory.frequency}}
            </el-descriptions-item>
            <el-descriptions-item label="大小">
                {{memory.size}}
            </el-descriptions-item>
            <el-descriptions-item label="占用率">
              <span :class="Number(memory.usage) > Number(threshold.memoryUsage) ? 'red' : 'green'" v-if="memory.usage">{{memory.usage}}%</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>显卡</span>
            </div>
          </template>
          <el-descriptions direction="vertical" :column="1" border>
            <el-descriptions-item label="品牌">
                {{gpu.brand}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 15px;clear:both;"></div>

    <el-row :gutter="15">
      <el-col :span="9">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>网络</span>
            </div>
          </template>
          <div class="el-descriptions">
            <div class="el-descriptions__body">
                <table class="el-descriptions__table is-bordered">
                  <tbody>
                    <tr>
                      <th colspan="1" class="el-descriptions__cell el-descriptions__label is-bordered-label is-left">名称</th>
                      <th colspan="1" class="el-descriptions__cell el-descriptions__label is-bordered-label is-left">IP</th>
                      <th colspan="1" class="el-descriptions__cell el-descriptions__label is-bordered-label is-left">连接状态</th>
                      <th colspan="1" class="el-descriptions__cell el-descriptions__label is-bordered-label is-left">MAC地址</th>
                    </tr>
                    <tr v-for="(value, index) in formatNetWork(network)" :key="index">
                      <td colspan="1" class="el-descriptions__cell el-descriptions__content is-left">{{value.name}}</td>
                      <td colspan="1" class="el-descriptions__cell el-descriptions__content is-left">{{value.ip}}</td>
                      <td colspan="1" class="el-descriptions__cell el-descriptions__content is-left">{{value.linkStatus}}</td>
                      <td colspan="1" class="el-descriptions__cell el-descriptions__content is-left">{{value.macAddr}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
        </el-card>
      </el-col>

      <el-col :span="9">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>硬盘</span>
            </div>
          </template>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="品牌">
                {{disk.brand}}
            </el-descriptions-item>
            <el-descriptions-item label="大小">
                {{disk.size}}
            </el-descriptions-item>
            <el-descriptions-item label="占用率">
                <span :class="Number(disk.usage) > Number(threshold.diskUsage) ? 'red' : 'green'" v-if="disk.usage">{{disk.usage}}%</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>整机电源控制</span>
            </div>
          </template>
          <div style="padding-top: 10px; padding-bottom: 10px;">
            <el-row>
              <el-col :span="12" style="padding-top: 6px;"><el-switch v-model="powerControl" active-text="开" inactive-text="关" @change="savePower($event)"></el-switch></el-col>
              <el-col :span="12"><el-button type="primary" size="small" style="margin-left: 15px;" @click="resetPower">重启</el-button></el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 15px;clear:both;"></div>

    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>传感器</span>
            </div>
          </template>
          <el-descriptions direction="vertical" :column="6" border>
            <el-descriptions-item label="温度">
              <ul class="show-list">
                <li class="show-list" v-for="item in formatObject(sensor.temperature)" :key="item.name">{{item.name}} <span :class="Number(item.value) > Number(threshold.sensorTemperature) ? 'red' : 'green'">{{item.value}}°C</span></li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item label="电压">
              <ul class="show-list">
                <li v-for="item in formatObject(sensor.voltage)" :key="item.name">{{item.name}} <span :class="Number(item.value) > Number(threshold.sensorVoltage) ? 'red' : 'green'">{{item.value}}V</span></li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item label="电流">
              <ul class="show-list">
                <li v-for="item in formatObject(sensor.electricCurrent)" :key="item.name">{{item.name}} <span>{{item.value}}A</span></li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item label="功耗">
                <span :class="Number(sensor.powerWaste) > Number(this.threshold.powerWaste) ? 'red' : 'green'">{{sensor.powerWaste}}W</span>
            </el-descriptions-item>
            <el-descriptions-item label="风扇转速">
                {{sensor.speed}}转/分
            </el-descriptions-item>
            <el-descriptions-item label="整机电源状态">
                <span :class="Number(sensor.powerStatus) === 0 ? 'green' : 'red'">{{Number(sensor.powerStatus) === 0 ? "正常" : "关机"}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue"
import axios from '../util/http.js'
export default defineComponent({
    setup(){
        let cpu = reactive({
          'Manufacturer': '',
          'Current Speed': '',
          'Core Count': '',
          'usage': ''
        });
        let memory = reactive({
          'brand': '',
          'frequency': '',
          'size': '',
          'usage': ''
        });
        let disk = reactive({
          'brand': '',
          'size': '',
          'usage': ''
        });
        let network = ref([]);
        let gpu = reactive({
          'brand': ''
        });
        let sensor = reactive({
            'temperature': '',
            'voltage': '',
            'electricCurrent': '',
            'powerWaste': '',
            'speed': '',
            'powerStatus': ''
        });
        let powerControl = ref(true);
        let init = ref(-1);
        let threshold = reactive({
            'cpuUsage': '',
            'memoryUsage': '',
            'diskUsage': '',
            'powerWaste': '',
            'sensorTemperature': '',
            'sensorVoltage': '',
            'interval': 100
        })
    
        let formatObject = (obj) => {
            let arr = [];
            for(let key in obj){
                arr.push({
                name: key,
                value: obj[key]
                })
            }
            return arr;
        }

        const formatNetWork = arr => {
            let thisArr = [];
            for (let i = 0; i < arr.length; i++) {
                for (const key in arr[i]) {
                    thisArr.push({
                        name: key,
                        ip: arr[i][key].ip,
                        linkStatus: arr[i][key].linkStatus,
                        macAddr: arr[i][key].macAddr,
                    })
                }
            }
            return thisArr;
        }

        const interval = () => {
            init.value = setInterval(() => {
                getData();
            }, 1000 * threshold.interval);
        }

        const getData = async () => {
            const { _cpu, _memory, _disk, _network, _gpu, _sensor, _threshold } = await axios.get("/api/getData");
            cpu.Manufacturer = _cpu.Manufacturer;
            cpu['Current Speed'] = _cpu['Current Speed'];
            cpu['Core Count'] = _cpu['Core Count'];
            cpu.usage = _cpu.usage;
            memory.brand = _memory.brand;
            memory.frequency = _memory.frequency;
            memory.size = _memory.size;
            memory.usage = _memory.usage;
            disk.brand = _disk.brand;
            disk.size = _disk.size;
            disk.usage = _disk.usage;
            network.value = _network;
            gpu.brand = _gpu.brand;
            sensor.temperature = _sensor.temperature;
            sensor.voltage = _sensor.voltage;
            sensor.electricCurrent = _sensor.electricCurrent;
            sensor.powerWaste = _sensor.powerWaste;
            sensor.speed = _sensor.speed;
            sensor.powerStatus = _sensor.powerStatus;
            threshold.cpuUsage = _threshold.cpuUsage;
            threshold.memoryUsage = _threshold.memoryUsage;
            threshold.diskUsage = _threshold.diskUsage;
            threshold.powerWaste = _threshold.powerWaste;
            threshold.sensorTemperature = _threshold.sensorTemperature;
            threshold.sensorVoltage = _threshold.sensorVoltage;
            threshold.interval = _threshold.interval;

            if(init.value !== -1){
                clearInterval(init.value)
            }

            interval();
        }

        const savePower = $event => {
            const that = this;
            this.$confirm(`确定${$event?'开启':'关闭'}电源吗?`, '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    /////////////////////////////////////////////////////////////////////////
                    this.$axios.post("/api/savePower", {powerControl: $event}).then(data => {
                        this.$notify({
                        title: "成功",
                        message: data.msg
                        })
                    }).catch(error => {
                        that.$notify.error({
                        title: "错误",
                        message: error.msg
                        })

                        that.powerControl = !$event;   
                    })
                    /////////////////////////////////////////////////////////////////////////
                }).catch(() => {
                    that.$notify.warning({
                        title: "提示",
                        message: `${$event?'开启':'关闭'}操作已取消`
                    })

                    that.powerControl = !$event;    
                });
        }
        
        const resetPower = () => {
            axios.get("/api/resetPower").then(data => {
                this.$notify({
                title: "成功",
                message: data.msg
                })
            }).catch(error => {
                this.$notify.error({
                title: "错误",
                message: error.msg
                })
            })
        }

        onMounted(() => {
            getData();
        })

        onUnmounted(() => {
            clearInterval(init.value);
        })

        return {
            cpu,
            memory,
            disk,
            network,
            gpu,
            sensor,
            powerControl,
            init,
            threshold,
            formatObject,
            formatNetWork,
            savePower,
            resetPower
        }
    }
});
</script>

<style>
.red {
  color: white;
  background: red;
  padding: 2px 5px 2px 5px;
}
.green {
  color: white;
  background: green;
  padding: 2px 5px 2px 5px;
}
.show-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.show-list li {
  padding-top: 8px;
  padding-bottom: 8px;
  height: 22px;
  border-bottom: 1px solid #ececec;
}
.show-list li:last-child {
  border-bottom: none !important;
}
.show-list li span {
  float: right;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
</style>